<template>
  <div>
    <div class="box" />
    <img ref="myImg" src="https://img1.baidu.com/it/u=1272403607,3200522445&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" alt="">
  </div>
</template>

<script>
export default {
  name: 'Palyground',
  mounted() {
    const url = 'https://img1.baidu.com/it/u=1272403607,3200522445&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'
    const intersectionObserver = new IntersectionObserver((entries) => {
      // entries[0].intersectionRatio 如果是0 不在可视区域 不是0在可视区域了
      console.log(entries[0].intersectionRatio)
      if (entries[0].intersectionRatio <= 0) return
      this.$refs.myImg.src = url
    })
    // 开始监听
    intersectionObserver.observe(this.$refs.myImg)
  }
}
</script>

<style >
.box {
  height: 2000px;
  background-color: lightgreen;
}
</style>
